// 操作指引
<template>
  <div class="operation-guide">
    <h1>操作指引</h1>
    <ul>
      <li>
        <i class="iconfont iconsettings"></i>
        <span>注册</span>
      </li>
      <li>
        <i class="iconfont iconclipboard"></i>
        <span>激活</span>
      </li>
      <li>
        <i class="iconfont iconresume"></i>
        <span>报价</span>
      </li>
      <li>
        <i class="iconfont iconpie-chart-2"></i>
        <span>下单</span>
      </li>
      <li>
        <i class="iconfont iconpurchasing"></i>
        <span>服务</span>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "OperationGuide"
};
</script>
<style lang='scss' scoped>
.operation-guide {
  width: 100%;
  height: 465px;
  background-color: #fff;
  color: black;
  h1{
   margin-top: 100px;
   font-size: 50px;
   text-align: center;
   font-weight: 600;

  }
  ul{
   margin-top: 70px;
   height: 140px;
   width: 100%;
   display: flex;
   justify-content: center;
   li{
    position: relative;
    margin: 0 90px;
    height: 140px;
    width: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    i{
     font-size: 67px;
      width: 67px;
      height: 75px;
    }
    span{
     margin-top: 40px;
     text-align: center;
     font-size: 17px;
     font-weight: 600;

    }
    &:nth-child(2n+1){
     &::after{
      position: absolute;
      left: 96px;
      top: -4px;
      content: '';
      width: 113px;
      height: 26px;
      background-color: springgreen;
      background: url('~@/assets/img/help_center/箭头.png') no-repeat;
      background-size: 100%;
     }
    }

    &:nth-child(2n){
     &::after{
      transform: rotate(180deg);
      position: absolute;
      left: 96px;
      top: 92px;
      content: '';
      width: 113px;
      height: 26px;
      background-color: springgreen;
      background: url('~@/assets/img/help_center/箭头.png') no-repeat;
      background-size: 100%;
     }
    }
    &:last-child{
     &::after{
     background: none;
     }
    }
   }
  }
}
</style>